/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import { Link, hashHistory } from 'react-router';
import PropTypes from 'prop-types';
import { Input, Button, Checkbox, Select, Grid, Feedback } from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import IceIcon from '@icedesign/icon';
import './UserLogin.scss';

const { Row, Col } = Grid;

// 寻找背景图片可以从 https://unsplash.com/ 寻找
const backgroundImage = 'https://img.alicdn.com/tfs/TB1zsNhXTtYBeNjy1XdXXXXyVXa-2252-1500.png';

export default class UserLogin extends Component {
  static displayName = 'UserLogin';

  static propTypes = {
    onLogin : PropTypes.func.isRequired,
  };

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      value: {
        account: undefined,
        password: undefined,
        checkbox: false,
      },
    };
  }

  formChange = (value) => {
    this.setState({
      value,
    });
  };

  handleSubmit = () => {
    this.setState({loading : true})
    this.refs.form.validateAll( async(errors, values) => {
      if (errors) { this.setState({loading : false}); return; }
      let flag = false
      try { flag = await this.props.onLogin(values) } catch (error) { }
      if(flag){
        Feedback.toast.success('登录成功');
        hashHistory.push('/');
      }else{
        Feedback.toast.error('登录失败, 请检查您输入的账户密码是否正确');
      }
      this.setState({loading : false})
    });
  };

  render() {
    return (
      <div style={styles.userLogin} className="user-login">
        <div
          style={{
            ...styles.userLoginBg,
            backgroundImage: `url(${backgroundImage})`,
          }}
        />
        <div style={styles.contentWrapper} className="content-wrapper">
          <h2 style={styles.slogan} className="slogan-login">
            欢迎使用 <br /> ADServing管理系统
          </h2>
          <div style={styles.formContainer}>
            <h4 style={styles.formTitle}>登录</h4>
            <IceFormBinderWrapper value={this.state.value} onChange={this.formChange} ref="form">
              <div style={styles.formItems}>
                <Row style={styles.formItem}>
                  <Col>
                    <IceIcon type="person" size="small" style={styles.inputIcon} />
                    <IceFormBinder name="account" required message="必填">
                      <Input maxLength={20} placeholder="帐号" addonAfter={null}/>
                    </IceFormBinder>
                  </Col>
                  <Col>
                    <IceFormError name="account" />
                  </Col>
                </Row>

                <Row style={styles.formItem}>
                  <Col>
                    <IceIcon type="lock" size="small" style={styles.inputIcon} />
                    <IceFormBinder name="password" required message="必填">
                      <Input htmlType="password" placeholder="密码" addonAfter={null}/>
                    </IceFormBinder>
                  </Col>
                  <Col>
                    <IceFormError name="password" />
                  </Col>
                </Row>

                <Row style={styles.formItem}>
                  <Col>
                    <IceIcon type="directory" size="small" style={styles.inputIcon} />
                    <IceFormBinder name="type" required message="必填">
                      <Select style={{ width: '100%' }} size="large" placeholder="账户类型">
                        <Select.Option value="COMPANY">公司</Select.Option>
                        <Select.Option value="USER">业务员</Select.Option>
                        <Select.Option value="ADMIN">管理员</Select.Option>
                      </Select>
                    </IceFormBinder>
                  </Col>
                  <Col>
                    <IceFormError name="type" />
                  </Col>
                </Row>

                <Row style={styles.formItem}>
                  <Col>
                    <IceFormBinder name="remember">
                      <Checkbox style={styles.checkbox}>记住账号</Checkbox>
                    </IceFormBinder>
                  </Col>
                </Row>

                <Row style={styles.formItem}>
                  <Button type="primary" onClick={this.handleSubmit} loading={this.state.loading} disabled={this.state.loading} style={styles.submitBtn}>
                    登 录
                  </Button>
                </Row>

                <Row className="tips" style={styles.tips}>
                  <Link to="/register" style={styles.link}>
                    立即注册
                  </Link>
                  <span style={styles.line}>|</span>
                  <Link to="/forgetPassword" style={styles.link}>
                    忘记密码
                  </Link>
                </Row>
              </div>
            </IceFormBinderWrapper>
          </div>
        </div>
      </div>
    );
  }
}

const styles = {
  userLogin: {
    position: 'relative',
    height: '100vh',
  },
  userLoginBg: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundSize: 'cover',
  },
  formContainer: {
    display: 'flex',
    justifyContent: 'center',
    flexDirection: 'column',
    padding: '30px 40px',
    background: '#fff',
    borderRadius: '6px',
    boxShadow: '1px 1px 2px #eee',
  },
  formItem: {
    position: 'relative',
    marginBottom: '25px',
    flexDirection: 'column',
  },
  formTitle: {
    margin: '0 0 20px',
    textAlign: 'center',
    color: '#3080fe',
    letterSpacing: '12px',
  },
  inputIcon: {
    position: 'absolute',
    left: '0px',
    top: '3px',
    color: '#999',
  },
  submitBtn: {
    width: '240px',
    background: '#3080fe',
    borderRadius: '28px',
  },
  checkbox: {
    marginLeft: '5px',
  },
  tips: {
    textAlign: 'center',
  },
  link: {
    color: '#999',
    textDecoration: 'none',
    fontSize: '13px',
  },
  line: {
    color: '#dcd6d6',
    margin: '0 8px',
  },
};
